<script >
import { ref,watch,defineComponent, toRefs, reactive, onMounted,onBeforeUnmount  } from 'vue';
import Sidebar from '../common/Sidebar.vue';
import Header from '../common/Header.vue';
import * as echarts from 'echarts';
import axios from "axios";
import 'echarts-liquidfill';
import {Plus} from "@element-plus/icons-vue";
export default defineComponent({
  name: "agency",
  components: {
    Plus,
    Sidebar,
    Header,
  },
  data() {
    return {
      agencyDetail: [], // 酒店列表
      humanList: [], // 人员列表
      vehicleList: [], // 车辆列表
      tableData:[],
      currentTable: 'human', // 初始选中的标签页
      editingHumanRow: null,
      editingVehicleRow: null,
      itinerary: [
        {
          head: {
            itineraryId: 'HT-2024-001',
            teamId: '01',
            personId: '0101',
            startpoint:'湖南长沙',
            terminal:'四川成都',
            image: '/egtable.png'
          },
          details: [
            { date: '2024-07-10', hotel: 'Hilton Hotel', agency: 'Travel Agency A' },
            { date: '2024-07-12', hotel: 'Marriott Hotel', agency: 'Travel Agency B' },
            // Add more details for this itinerary
          ],
        },
        {
          head: {
            itineraryId: 'HT-2024-121',
            teamId: '02',
            personId: '0202',
            startpoint:'湖南长沙',
            terminal:'四川成都',
            image:''
          },
          details: [
            { date: '2024-07-10', hotel: 'Hilton Hotel', agency: 'Travel Agency A' },
            { date: '2024-07-12', hotel: 'Marriott Hotel', agency: 'Travel Agency B' },
            // Add more details for this itinerary
          ],
        },
        // 添加更多的 mergedData 对象
      ],
      exit: [
        {
          head: {
            exitId: 'HT-2024-001',
            teamId: '01',
            status:'1',
            legal: '0101',
            location:'湖南长沙',
            expirationDate:'10',
            startTime:'2024.7.9',
            endTime:'2034.7.9',
            cost:'120',
            approved: false,
            rejected: false,
          },
        },
        {
          head: {
            exitId: 'HT2001',
            teamId: '01',
            status:'1',
            legal: '0101',
            location:'湖南长沙',
            expirationDate:'10',
            startTime:'2024.7.9',
            endTime:'2034.7.9',
            cost:'120',
            approved: false,
            rejected: false,
          },
        },
        // 添加更多的 mergedData 对象
      ],
      buttonStates: {},
      currentPage: 1,
      pageSize: 1,
      exitCurrentPage: 1,
      exitPageSize: 1,
    };
  },
  computed: {
    pagedMergedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.itinerary.slice(start, end);
    },
    pagedExitData() {
      const start = (this.exitCurrentPage - 1) * this.exitPageSize;
      const end = start + this.exitPageSize;
      return this.exit.slice(start, end);
    }
  },
  mounted() {
    // 在组件挂载时发送请求获取商品信息
    this.fetchAgencyDetail();
    this.fetchHumanList();
    this.fetchVehicleList();
    this.initializeButtonStates();
  },
  methods: {
    async deleteHuman(id){
      await axios.post(`http://localhost:8083/Person/deletePerson`,{
        personid:id
      },{
        headers: {
          'Content-Type':'application/json',
        },
      });
      this.fetchHumanList();
    },

    async deleteCar(id){
      await axios.post(`http://localhost:8083/Car/deleteCar`,{
        carid:id
      },{
        headers: {
          'Content-Type':'application/json',
        },
      });
      this.fetchVehicleList();
    },

    addHumanRow() {
      const newRow = {
        personid:this.humanList.length > 0 ? parseInt(this.humanList[this.humanList.length-1].personid)+1 : this.$route.params.id*100+this.humanList.length,
        teamid: this.$route.params.id,// 根据实际情况，可能需要生成一个唯一的ID
        type:'空',
        personname: '空',
        carid: '空',
        age:'空',
      };
      this.humanList.push(newRow);
      this.editingHumanRow = this.humanList.length-1;
      axios.post(`http://localhost:8083/Person/insertPerson`, {
        personid:newRow.personid,
        teamid: newRow.teamid,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
    },
    addVehicleRow() {
      const newRow = {
        carid:this.vehicleList.length > 0 ? parseInt(this.vehicleList[this.vehicleList.length-1].carid)+1 : this.$route.params.id*100+this.vehicleList.length,
        teamid: this.$route.params.id,// 根据实际情况，可能需要生成一个唯一的ID
        personid: '空',
        type:'空',
        date: '空',
        style: '空',
        information: '空',
        place: '空',
        direction: '空',
        color:'空',
      };
      this.vehicleList.push(newRow);
      this.editingVehicleRow = this.vehicleList.length-1;
      axios.post(`http://localhost:8083/Car/insertCart`, {
        carid:newRow.carid,
        teamid: newRow.teamid,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
    },

    handleVehicleEdit(index) {
      this.editingVehicleRow = index;
    },
    async handleVehicleEditEnd(index) {
      // 可以在这里添加保存逻辑
      this.editingVehicleRow = null;
      console.log(this.humanList[index]);
      await axios.post("http://localhost:8083/Car/updateCart", {personid: this.vehicleList[index].personid,
        type: this.vehicleList[index].type,
        carid: this.vehicleList[index].carid,
        date: this.vehicleList[index].date,
        style: this.vehicleList[index].style,
        information: this.vehicleList[index].information,
        place: this.vehicleList[index].place,
        direction: this.vehicleList[index].direction,
        color: this.vehicleList[index].color,
        teamid: this.vehicleList[index].teamid,
      },{headers: {
          'Content-Type':'application/json',
        },})
          .then(response => {
            // 请求成功，处理响应
            console.log('景区信息更新成功', response.data);
            // 你可以在这里根据响应更新UI或进行其他操作
          })
          .catch(error => {
            // 请求失败，处理错误
            if (error.response) {
              // 服务器返回了错误信息
              console.error('更新景区信息失败:', error.response.data);
            } else if (error.request) {
              // 请求已经发起，但没有收到响应
              console.error('请求已发送，但没有收到响应');
            } else {
              // 设置请求时触发了错误
              console.error('请求配置中发生错误');
            }
            // 在这里可以添加一些额外的错误处理逻辑，比如通知用户
          });
    },
    handleHumanEdit(index) {
      this.editingHumanRow = index;
    },
    async handleHumanEditEnd(index) {
      // 可以在这里添加保存逻辑
      this.editingHumanRow = null;
      console.log(this.humanList[index]);
      await axios.post("http://localhost:8083/Person/updatePerson", {personid: this.humanList[index].personid,
        type: this.humanList[index].type,
        carid: this.humanList[index].carid,
        age: this.humanList[index].age,
        personname: this.humanList[index].personname,
        teamid: this.humanList[index].teamid,
      },{headers: {
          'Content-Type':'application/json',
        },})
          .then(response => {
            // 请求成功，处理响应
            console.log('景区信息更新成功', response.data);
            // 你可以在这里根据响应更新UI或进行其他操作
          })
          .catch(error => {
            // 请求失败，处理错误
            if (error.response) {
              // 服务器返回了错误信息
              console.error('更新景区信息失败:', error.response.data);
            } else if (error.request) {
              // 请求已经发起，但没有收到响应
              console.error('请求已发送，但没有收到响应');
            } else {
              // 设置请求时触发了错误
              console.error('请求配置中发生错误');
            }
            // 在这里可以添加一些额外的错误处理逻辑，比如通知用户
          });
    },
    fetchAgencyDetail() {
      console.log(this.$route.params.id);
      axios.post(`http://localhost:8083/TripTeam/searchTripTeam`, {
        teamid: this.$route.params.id,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
          .then(response => {
            this.agencyDetail = response.data; // 假设你有一个 hotelDetail 数据属性来存储单个酒店的详情
            console.log(this.agencyDetail);
            this.updateChart();
          })
          .catch(error => {
            console.error('获取酒店详情失败:', error);
          });
    },
    fetchHumanList() {
      console.log(this.$route.params.id);
      axios.post(`http://localhost:8083/Person/searchPersonByTeamId`, {
        teamid: this.$route.params.id,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
          .then(response => {
            this.humanList = response.data; // 假设你有一个 hotelDetail 数据属性来存储单个酒店的详情
            console.log(this.humanList);
          })
          .catch(error => {
            console.error('获取人员详情失败:', error);
          });
    },
    fetchVehicleList() {
      console.log(this.$route.params.id);
      axios.post(`http://localhost:8083/Car/searchCarByTeamId`, {
        teamid: this.$route.params.id,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
          .then(response => {
            this.vehicleList = response.data; // 假设你有一个 hotelDetail 数据属性来存储单个酒店的详情
            console.log(this.vehicleList);
          })
          .catch(error => {
            console.error('获取人员详情失败:', error);
          });
    },
    updateChart() {
      const capacity = this.agencyDetail.credit/100 || 0; // 使用默认值防止未定义
      console.log(this.agencyDetail.capacity);
      const option1 = {
        series: [{
          data: [capacity, capacity-0.1, capacity-0.2, capacity-0.3],
        }]
      };

      const myChart = echarts.init(document.getElementById('myChart'));
      myChart.setOption(option1);
    },
    showTable(table) {
      this.currentTable = table;
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleExitPageChange(page) {
      this.exitCurrentPage = page;
      this.initializeButtonStates(); // 每次分页切换时初始化按钮状态
    },
    approve(exitId) {
      const exitItem = this.exit.find(item => item.head.exitId === exitId);
      if (exitItem) {
        exitItem.head.approved = true;
        exitItem.head.rejected = false;
        this.updateButtonState(exitId, true, false);
      }
    },
    reject(exitId) {
      const exitItem = this.exit.find(item => item.head.exitId === exitId);
      if (exitItem) {
        exitItem.head.rejected = true;
        exitItem.head.approved = false;
        this.updateButtonState(exitId, false, true);
      }
    },
    initializeButtonStates() {
      const savedButtonStates = JSON.parse(localStorage.getItem('buttonStates')) || {};
      this.exit.forEach(item => {
        if (savedButtonStates[item.head.exitId]) {
          item.head.approved = savedButtonStates[item.head.exitId].approved;
          item.head.rejected = savedButtonStates[item.head.exitId].rejected;
        } else {
          this.buttonStates[item.head.exitId] = {
            approved: item.head.approved,
            rejected: item.head.rejected
          };
        }
      });
    },
    updateButtonState(exitId, approved, rejected) {
      this.$set(this.buttonStates, exitId, { approved, rejected });
      localStorage.setItem('buttonStates', JSON.stringify(this.buttonStates));
    }
  },
  setup() {
    const state = reactive({
      title: {
        text: '信誉积分',
      },
      option1: {
        series: [
          {
            type: "liquidFill",
            data: [0.6, 0.5, 0.4, 0.3],
            itemStyle: {
              normal: {
                shadowBlur: 0,
              },
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 5,
                borderColor: "#156ACF",
                shadowBlur: 20,
                shadowColor: "#156ACF",
              },
            },
          },
        ],
      },
    });
    let timer;
    const initeCharts = () => {
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption(state.option1)
    }
    onMounted(() => {
      initeCharts();

    });
    return {
      state,
      ...toRefs(state),
    };
  },
});
</script>


<template>
  <body>
  <el-col style="height: 100vh;">
    <Header />
    <el-row style="height: 100vh;">
      <el-col :span="3" style="height: 100%;">
        <Sidebar />
      </el-col>
      <el-col :span="21" style="height: 800px; text-align: center;overflow-y: auto" >
        <el-row style="margin-top: 30px;margin-bottom: 30px">
          <el-col :span="6">
            <div id="myChart" :style="{ width: '300px', height: '300px', backgroundColor:'#fff',borderRadius:'80px',marginLeft:'20px'}"></div>
            <h2 :style="{ marginRight:'20px'}">信誉积分:60</h2>
          </el-col>
          <el-col :span="11">
            <div style="background-color: white;border-radius: 80px;padding-top: 50px;padding-left: 40px;margin-right: 40px;margin-bottom: 20px" >
            <el-row>
              <el-col :span=9><el-row style="margin-bottom: 20px"><label class="lbl-hotel1">旅游社ID:{{agencyDetail.teamid}}</label></el-row></el-col>
              <el-col :span="13"><el-row style="margin-bottom: 20px;"><label class="lbl-hotel1">旅游社名:{{agencyDetail.teamname}}</label></el-row></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><el-row style="margin-bottom: 20px"><label class="lbl-hotel">位置:{{agencyDetail.intelligence}}</label></el-row></el-col>
            </el-row>
            </div>
            <el-row>
              <el-col :span="8" style="display: flex; justify-content: left"><el-button class="btn-agency"  color="#337ecc" type="primary" size="large" round @click="showTable('human')">管理人员</el-button></el-col>
              <el-col :span="8" style="display: flex; justify-content: left"><el-button class="btn-agency"  color="#626aef" type="primary" size="large" round @click="showTable('vehicle')">车辆信息</el-button></el-col>
              <el-col :span="8" style="display: flex; justify-content: left"><el-button class="btn-agency"  color="#67C23A" type="primary" size="large" round @click="showTable('itinerary')">所有行程</el-button></el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="background-color: white;border-radius: 80px;display: flex;justify-content: center;padding-top: 20px" >
            <div style="width: 200px;height: 300px">
              <el-row v-for="(data, index) in pagedExitData" :key="index" style="background-color: white">
                <el-col class="cell1">证件号:{{ data.head.exitId }}</el-col>
                <el-col class="cell1">团队编号:{{ data.head.teamId }}</el-col>
                <el-col class="cell1">状态:{{ data.head.status }}</el-col>
                <el-col class="cell1">合法标识:{{ data.head.legal }}</el-col>
                <el-col class="cell1">地点:{{ data.head.location }}</el-col>
                <el-col class="cell1">有效期:{{ data.head.expirationDate }}年</el-col>
                <el-col class="cell1">开始时间:{{ data.head.startTime }}</el-col>
                <el-col class="cell1">结束时间:{{ data.head.endTime }}</el-col>
                <el-col class="cell1">成本:{{ data.head.cost }}</el-col>
                <el-row>
                  <el-col v-if="!data.head.approved && !data.head.rejected" :span="3" style="margin-left: 20px; margin-right: 80px;margin-top: 10px">
                    <el-button type="success" round @click="approve(data.head.exitId)">通过</el-button>
                  </el-col>
                  <el-col v-if="!data.head.approved && !data.head.rejected" :span="3" style="margin-top: 10px">
                    <el-button type="danger" round @click="reject(data.head.exitId)">拒绝</el-button>
                  </el-col>
                  <el-col v-if="data.head.approved" :span="24" style="margin-left: 45px;margin-top: 10px">
                    <el-button type="success" round disabled>已通过</el-button>
                  </el-col>
                  <el-col v-if="data.head.rejected" :span="24" style="margin-left: 45px;margin-top: 10px">
                    <el-button type="danger" round disabled>已拒绝</el-button>
                  </el-col>
                </el-row>
              </el-row>
              <el-pagination
                  layout="prev, pager, next"
                  :total="exit.length"
                  :page-size="exitPageSize"
                  @current-change="handleExitPageChange"
                  style="margin-top: 10px; text-align: center; display: flex; justify-content: center;">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
        <div v-show="currentTable === 'human'" style="background-color: white;border-radius: 80px; padding-bottom: 30px;">
        <h1>管理人员</h1>
        <el-table :data="humanList" stripe  height="250"  style="margin: 25px;width: 1430px" >
          <el-table-column prop="personid" label="管理员编号" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.personid" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.personid }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="personname" label="姓名" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.personname" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.personname }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.age" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.age }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="职位" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.type" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.type }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="carid" label="对应车辆编号" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.carid" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.carid }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="100" align="center">
            <template #default ="scope">
              <el-button link type="primary" @click="deleteHuman(scope.row.personid)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
          <el-button color="#9d2933" circle size="large" plain @click="addHumanRow" style="margin-right: 28px"><el-icon><plus/></el-icon></el-button>
        </div>
        <div v-show="currentTable === 'vehicle'" style="background-color: white;border-radius: 80px; padding-bottom: 30px">
        <h1>车辆信息</h1>
        <el-table :data="vehicleList" stripe  height="250"  style="margin: 25px;width: 1430px" >
          <el-table-column prop="carid" label="车辆编号" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.carid" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.carid }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="personid" label="对应管理员编号" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.personid" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.personid }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="车辆类型" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.type" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.type }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="日期" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.date" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.date }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="style" label="样式" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.style" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.style }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="information" label="信息" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.information" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.information }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="place" label="位置" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.place" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.place }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="direction" label="方向" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.direction" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.direction }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="color" label="颜色" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.color" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.color }}
              </div>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" min-width="100" align="center">
            <template #default="scope">
              <el-button link type="primary" @click="deleteCar(scope.row.carid)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
          <el-button color="#9d2933" circle size="large" plain @click="addVehicleRow" style="margin-right: 28px"><el-icon><plus/></el-icon></el-button>
        </div>
        <div v-show="currentTable === 'itinerary'" style="background-color: white;border-radius: 80px; padding-bottom: 30px">
            <h1>所有行程</h1>
            <el-row v-for="(data, index) in pagedMergedData" :key="index" style="background-color: white">
              <el-col :span="8" class="cell1">行程单号:{{ data.head.itineraryId }}</el-col>
              <el-col :span="8" class="cell1">旅行社号:{{ data.head.teamId }}</el-col>
              <el-col :span="8" class="cell1">导游号:{{ data.head.personId }}</el-col>

            </el-row>
            <el-row v-for="(data, index) in pagedMergedData" :key="index" style="background-color: white">
              <el-col :span="8" class="cell1">起始地:{{ data.head.startpoint }}</el-col>
              <el-col :span="16" class="cell1">目的地:{{ data.head.terminal }}</el-col>
            </el-row>
          <el-row v-for="(itineraryData, index) in pagedMergedData" :key="index">
            <el-table :data="itineraryData.details">
              <el-table-column width="500" property="date" label="日期" />
              <el-table-column width="500" property="hotel" label="居住酒店" />
              <el-table-column width="470" property="agency" label="旅游景点" />
            </el-table>
          </el-row>
            <el-pagination
                layout="prev, pager, next"
                :total="itinerary.length"
                :page-size="pageSize"
                @current-change="handlePageChange"
                style="margin-top: 20px; text-align: center; display: flex; justify-content: center;">
            </el-pagination>
        </div>
      </el-col>
    </el-row>
  </el-col>
  </body>
</template>

<style scoped>
@import "../../assets/css/global.css";
</style>